<template>
  <div class="register-table">
    <table cellspacing="0" cellpadding="0">
      <caption>
        <h2 class="register-title">四川省出租车驾驶员从业资格注册登记表</h2>
      </caption>
      <tr>
        <td>姓名</td>
        <td>{{ registerForm.name }}</td>
        <td>性别</td>
        <td>{{ registerForm.gender }}</td>
        <td rowspan="6">
          <div class="upload-img">
            <img v-if="registerForm.photoBase" :src="registerForm.photoBase" alt="" />
          </div>
        </td>
      </tr>
      <tr>
        <td>住址</td>
        <td>{{ registerForm.address }}</td>
        <td>联系电话</td>
        <td>{{ registerForm.telephone }}</td>
      </tr>
      <tr>
        <td>注册服务单位</td>
        <td>{{ registerForm.enterpriseName }}</td>
        <td>投诉电话</td>
        <td>{{ registerForm.complaintPhone }}</td>
      </tr>
      <tr>
        <td>身份证号</td>
        <td colspan="3">{{ registerForm.cardNo }}</td>
      </tr>
      <tr>
        <td>从业资格证号</td>
        <td colspan="3">{{ registerForm.certificateCode }}</td>
      </tr>
      <tr>
        <td>车辆信息</td>
        <td colspan="3">{{ registerForm.vehicleNo }}</td>
      </tr>
      <tr>
        <td>申请种类</td>
        <td colspan="4">
          <div class="materialbox flex justify-center">
            <input
              id="radio1"
              type="radio"
              name="radio"
              :checked="registerForm.registerType === 1"
            /><label for="radio1">注册</label>&nbsp;&nbsp;&nbsp;&nbsp;
            <input
              id="radio2"
              type="radio"
              name="radio"
              :checked="registerForm.registerType === 2"
            /><label for="radio2">延续注册</label>
          </div>
        </td>
      </tr>
      <tr>
        <td>材料清单</td>
        <td colspan="2">
          <div class="materialbox">
            <div class="title">注册资料清单：</div>
            <div class="flex justify-center flex-col">
              <div
                class="flex"
                style="margin-left: 10px; align-items: baseline"
                v-for="(item, index) in registerMaterials"
                :key="index"
                :label="item.label"
              >
                <input
                  type="checkbox"
                  :id="`checktype1${index}`"
                  class="flex flex-start"
                  :checked="
                    registerForm.registerMaterials &&
                    registerForm.registerMaterials.includes(item.value)
                  "
                />
                <label :for="`checktype1${index}`">&nbsp;{{ item.label }}</label>
              </div>
            </div>
          </div>
        </td>
        <td colspan="2">
          <div class="materialbox">
            <div class="title">延续注册资料清单：</div>
            <div class="flex justify-center flex-col">
              <div
                class="flex"
                style="margin-left: 10px; align-items: baseline"
                :key="index"
                v-for="(item, index) in continueRegisterMaterials"
                :label="item.label"
              >
                <input
                  type="checkbox"
                  :id="`checktype2${index}`"
                  class="flex flex-start"
                  :checked="
                    registerForm.continueRegisterMaterials &&
                    registerForm.continueRegisterMaterials.includes(item.value)
                  "
                />
                <label :for="`checktype2${index}`">&nbsp;{{ item.label }}</label>
              </div>
            </div>
          </div>
        </td>
      </tr>
      <tr>
        <td>承诺</td>
        <td colspan="4">
          <div class="promise">
            <div class="content">本人承诺以上所有内容真实、有效，并承担由此产生的法律责任。</div>
            <div class="sign">
              <span>本人签字：</span>
              <span>日期：</span>
            </div>
          </div>
        </td>
      </tr>
      <tr>
        <td>管理部门意见</td>
        <td colspan="4">
          <div class="suggest">
            <p class="title">经审核：</p>
            <div class="item">
              <input type="checkbox" id="checkaudit" class="flex flex-start" v-model="checked" />
              <label for="checkaudit">&nbsp;同意注册</label>
            </div>
            <div class="item">
              <input type="checkbox" class="flex flex-start" id="checkaudit1" v-model="checked" />
              <label for="checkaudit1">&nbsp;不同意注册，理由:</label>
            </div>
            <div>
              <div class="textR" style="padding: 10px 50px 0 0">(盖 章)</div>
              <div class="textR" style="padding: 10px 50px 5px 0">
                年&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;月&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;日
              </div>
            </div>
          </div>
        </td>
      </tr>
      <tr>
        <td rowspan="2">证件注册信息</td>
        <td colspan="4">
          <div class="register-info">从业资格证注册有效期：{{ registerForm.registerEndDate }}</div>
        </td>
      </tr>
      <tr>
        <td colspan="4">
          <div class="register-info">
            <span>经办人(签字)</span>
            <span class="beginDate">日期：{{ registerForm.registerBeginDate }}</span>
          </div>
        </td>
      </tr>
    </table>
  </div>
</template>

<script>
import { defineComponent, computed, reactive, toRefs, watch } from 'vue-demi'
import { getImage } from '../../utils/common'
const registerMaterials = [
  { value: 1, label: '从业资格证及复印件' },
  {
    value: 2,
    label:
      '劳动合同、聘用协议或者经营合同原件及复印件（驾驶本人出租车从事经营活动的个体经营者不提供）'
  },
  { value: 3, label: '道路运输证及复印件（驾驶本人出租车从事经营活动的个体经营者需提供）' }
]
const continueRegisterMaterials = [
  { value: 1, label: '从业资格证及复印件' },
  {
    value: 2,
    label:
      '劳动合同、聘用协议或者经营合同原件及复印件（驾驶本人出租车从事经营活动的个体经营者不提供）'
  },
  { value: 3, label: '继续教育记录' },
  { value: 4, label: '道路运输证及复印件（驾驶本人出租车从事经营活动的个体经营者需提供）' }
]

export default defineComponent({
  name: 'registerTable',
  props: {
    childData: {
      type: Object,
      default: () => {}
    }
  },
  setup(prop, { root }) {
    const data = reactive({
      checked: false,
      registerForm: {
        name: '',
        cardNo: '',
        gender: '',
        address: '',
        photoBase: '',
        telephone: '',
        vehicleNo: '',
        registerType: '',
        enterpriseName: '',
        complaintPhone: '',
        certificateCode: '',
        registerMaterials: [],
        continueRegisterMaterials: [],
        registerBeginDate: '',
        registerEndDate: ''
      }
    })

    watch(
      () => prop.childData,
      newVal => {
        for (let key in data.registerForm) {
          if (key === 'gender') {
            data.registerForm[key] = newVal[key] === 1 ? '男' : '女'
          } else if (key === 'photoBase') {
            data.registerForm[key] = getImage(newVal[key])
          } else {
            data.registerForm[key] = newVal[key]
          }
        }
      },
      {
        deep: true,
        immediate: true
      }
    )

    return {
      getImage,
      ...toRefs(data),
      registerMaterials,
      continueRegisterMaterials
    }
  }
})
</script>

<style lang="scss" scoped>
.register-table {
  .register-title {
    font-size: 25px !important;
    font-weight: bold !important;
  }
  .flex {
    display: flex;
  }
  .flex-col {
    flex-direction: column;
  }
  .justify-center {
    justify-content: center;
  }
  table {
    width: 800px;
    flex-basis: 100%;
    border-top: 1px solid gray;
    border-left: 1px solid gray;
    font-size: 16px;
    td,
    th {
      text-align: center;
      padding: 5px;
      min-width: 100px;
      border-bottom: 1px solid gray;
      border-right: 1px solid gray;
    }
    .upload-img {
      display: flex;
      justify-content: center;
      img {
        width: 110px;
        height: 120px;
      }
    }
    .input-btn {
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .materialbox {
      text-align: left;
      width: 100%;
      height: 100%;
      background-color: transparent;
      pointer-events: none;
      .title {
        margin: 5px;
        color: #409eff;
      }
      .el-checkbox-group {
        display: flex;
        flex-direction: column;
        :deep(.el-checkbox) {
          display: flex;
          align-items: center;
          .el-checkbox__label {
            color: #409eff;
            white-space: break-spaces;
          }
        }
      }
    }
    .promise {
      display: flex;
      flex-direction: column;
      padding: 20px 10px 10px 0;
      .content {
        text-align: left;
      }
      .sign {
        padding-top: 15px;
        display: flex;
        justify-content: flex-end;
        & > span {
          padding-right: 100px;
        }
      }
    }
    .register-info {
      display: flex;
      justify-content: space-between;
      padding: 0 20px;
      .beginDate {
        padding: 0 80px 0 0;
      }
    }
    .suggest {
      .title {
        text-align: left;
      }
      .item {
        display: flex;
      }
      .textR {
        text-align: right;
      }
    }
  }
}
</style>
